<template>
  <div>
    <div>
      <el-form :inline="true" :model="repaired" class="demo-form-inline">
        <el-form-item label="报修状态">
          <el-select v-model="repaired.repairState" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="业主姓名">
          <el-input v-model="repaired.ownerRealName" placeholder="请输入业主姓名" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadRepair">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-dialog :visible.sync="dialogFormVisible">
        <el-form
          ref="repair"
          :model="repair"
          label-width="100px"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="报修编号" prop="repair">
                <el-input v-model="repair.repairNum" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="报修状态" prop="repair">
<!--                <el-input v-model="repair.repairState" />-->
                <el-select v-model="repair.repairState" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="业主姓名" prop="repair">
                <el-input v-model="repair.ownerRealName" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="创建时间" prop="repair">
                <el-input v-model="repair.createTime" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="派单时间" prop="repair">
                <el-input v-model="repair.assignmentTime" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="接单时间" prop="repair">
                <el-input v-model="repair.receivingOrdersTime" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="处理完成时间" prop="repair">
                <el-input v-model="repair.completeTime" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="取消时间" prop="repair">
                <el-input v-model="repair.cancelTime" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="期待上门时间" prop="repair">
                <el-input v-model="repair.doorTime" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分派人id" prop="repair">
                <el-input v-model="repair.assignmentId" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="处理人姓名" prop="repair">
                <el-input v-model="repair.completeName" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="处理人电话" prop="repair">
                <el-input v-model="repair.completePhone" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="报修内容" prop="repair">
                <el-input v-model="repair.repairContent" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="详细地址" prop="repair">
                <el-input v-model="repair.address" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="备注" prop="repair">
                <el-input v-model="repair.remark" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="小区名称" prop="repair">
                <el-input v-model="repair.communityName" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible= false">取 消</el-button>
          <el-button type="primary" @click="saveRepair()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!--按钮-->
    <el-button type="primary" size="mini" icon="el-icon-download" @click="handleExport">导出</el-button>
    <div>
      <el-table
        :data="repairs"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          label="序号"
          width="120"
        >
          <template slot-scope="scope">{{ scope.$index+1 }}</template>
        </el-table-column>
        <el-table-column
          label="报修编号"
          width="120"
        >
          <template slot-scope="scope">{{ scope.row.repairNum }}</template>
        </el-table-column>
        <el-table-column
          label="报修状态"
          width="120"
        >
          <template slot-scope="scope">{{ scope.row.repairState }}</template>
        </el-table-column>
        <el-table-column
          label="业主姓名"
          width="120"
        >
          <template slot-scope="scope">{{ scope.row.ownerRealName }}</template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          width="200"
        >
          <template slot-scope="scope">{{ scope.row.createTime }}</template>
        </el-table-column>
        <el-table-column
          label="期待上门时间"
          width="200"
        >
          <template slot-scope="scope">{{ scope.row.doorTime }}</template>
        </el-table-column>
        <el-table-column
          label="处理人姓名"
          width="120"
        >
          <template slot-scope="scope">{{ scope.row.completeName }}</template>
        </el-table-column>
        <el-table-column
          label="处理人电话"
          width="120"
        >
          <template slot-scope="scope">{{ scope.row.completePhone }}</template>
        </el-table-column>
        <el-table-column
          label="报修内容"
          width="120"
        >
          <template slot-scope="scope">{{ scope.row.repairContent }}</template>
        </el-table-column>
        <el-table-column
          label="详细地址"
          width="120"
        >
          <template slot-scope="scope">{{ scope.row.address }}</template>
        </el-table-column>
        <el-table-column
          label="备注"
        >
          <template slot-scope="scope">{{ scope.row.remark }}</template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="120"
        >
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <span class="demonstration" />
      <el-pagination
        :current-page.sync="current"
        :page-sizes="[3, 6, 9, 12]"
        :page-size="size"
        layout=" sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Repair',
  data() {
    return {
      options: [
        {
          value: 'Pend',
          label: '待处理'
        }, {
          value: 'Dispatch',
          label: '已分派'
        },
        {
          value: 'Pending',
          label: '处理中'
        },
        {
          value: 'Pended',
          label: '已处理'
        },
        {
          value: 'NoPend',
          label: '不处理'
        },
        {
          value: 'Canceled',
          label: '已取消'
        }],
      value: '',
      current: 1,
      size: 3,
      total: 0,
      repairs: [],
      repair: {
        index: '',
        repairNum: '',
        repairState: '',
        ownerRealName: '',
        assignmentTime: '',
        receivingOrdersTime: '',
        completeTime: '',
        cancelTime: '',
        doorTime: '',
        createTime: '',
        assignmentId: '',
        completeName: '',
        completePhone: '',
        repairContent: '',
        address: '',
        remark: '',
        communityName: ''
      },
      repaired: {
        repairState: '',
        ownerRealName: ''
      },
      dialogFormVisible: false
    }
  }, created() {
    this.loadRepair(this.current, this.size)
  },
  methods: {
    loadRepair(current, size, repairs) {
      current = this.current
      size = this.size
      repairs = this.repaired
      this.axios({
        url: '/repairs/page?' + this.qs.stringify(repairs),
        menthod: 'get',
        params: {
          current: current,
          size: size
        }
      })
        .then(res => {
          this.repairs = res.data.records
          this.repairs.map(function(val) {
            // eslint-disable-next-line eqeqeq
            if (val.repairState == 'Pend') {
                val.repairState = '待处理'
              // eslint-disable-next-line eqeqeq
            } else if (val.repairState == 'Dispatch') {
                val.repairState = '已分派'
              // eslint-disable-next-line eqeqeq
            } else if (val.repairState == 'Pending') {
                val.repairState = '处理中'
              // eslint-disable-next-line eqeqeq
            } else if (val.repairState == 'Pended') {
                val.repairState = '已处理'
              // eslint-disable-next-line eqeqeq
            } else if (val.repairState == 'NoPend') {
                val.repairState = '不处理'
            } else if (val.repairState == 'Canceled') {
                val.repairState = '已取消'
            }
          })
          this.current = res.data.current
          this.size = res.data.size
          this.total = res.data.total
        })
    },
    loadReset() {
      this.repaired = {
        repairState: '',
        ownerRealName: ''
      }
      this.loadRepair(this.current, this.size)
    },
    // 点击修改按钮回显数据
    handleEdit(index, row) {
      this.repair = JSON.parse(JSON.stringify(row))
      this.dialogFormVisible = true
    },
    saveRepair() {
      console.log(111)
      this.axios.put('/repairs', this.repair).then(res => {
        // eslint-disable-next-line eqeqeq
          this.$message({
            message: '修改成功！',
            type: 'success'
          })

            this.loadRepair(this.current, this.size)

      })
    },
    handleSizeChange(nowSize) {
      this.size = nowSize
      this.loadVisitor(this.current, this.size)
      console.log(`每页 ${nowSize} 条`)
    },
    handleCurrentChange(nowPage) {
      this.current = nowPage
      this.loadVisitor(this.current, nowPage)
      console.log(`当前页: ${nowPage}`)
    }, handleExport() {
      // eslint-disable-next-line no-undef
      this.axios({
        method: 'get',
        url: '/repair/download',
        responseType: 'arraybuffer'
      })
        .then(res => {
          console.log(res)
          // 使用Blob对象将后端返回的Arraybuffer格式得数据转成blob类型的数据 window.URL.createObjectURL(blob)可以把一个blob转成blobURL，用作图片显示，文件下载（不能再服务器上存储，只能在浏览器使用）
          var b = new Blob([res.data], { type: 'application/vnd.ms-excel' })
          // 使用URL对象将blob类型的数据生成一个在线下载的链接
          var url = URL.createObjectURL(b)
          // 然后我们使用a标签进行下载
          var link = document.createElement('a')

          // 设置导出的文件名
          link.download = Date.now() + '.xlsx'
          link.href = url
          // 点击获取文件
          link.click();

          (err) => {
            console.log(err)
          }
        })
    }
  }
}
</script>

<style scoped>

</style>
